<!doctype html>
<html>
<head>
    <title>Rich Text Editor</title>
    <script type="text/javascript">
        //https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Editable_content
        var oDoc, sDefTxt;

        function initDoc() {
            oDoc = document.getElementById("textBox");
            sDefTxt = oDoc.innerHTML;
            if (document.compForm.switchMode.checked) { setDocMode(true); }
        }

        function formatDoc(sCmd, sValue) {
            if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); }
        }

        function validateMode() {
            if (!document.compForm.switchMode.checked) { return true ; }
            alert("Uncheck \"Show HTML\".");
            oDoc.focus();
            return false;
        }

        function setDocMode(bToSource) {
            var oContent;
            if (bToSource) {
                oContent = document.createTextNode(oDoc.innerHTML);
                oDoc.innerHTML = "";
                var oPre = document.createElement("pre");
                oDoc.contentEditable = false;
                oPre.id = "sourceText";
                oPre.contentEditable = true;
                oPre.appendChild(oContent);
                oDoc.appendChild(oPre);
                document.execCommand("defaultParagraphSeparator", false, "div");
            } else {
                if (document.all) {
                    oDoc.innerHTML = oDoc.innerText;
                } else {
                    oContent = document.createRange();
                    oContent.selectNodeContents(oDoc.firstChild);
                    oDoc.innerHTML = oContent.toString();
                }
                oDoc.contentEditable = true;
            }
            oDoc.focus();
        }

        function printDoc() {
            if (!validateMode()) { return; }
            var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
            oPrntWin.document.open();
            oPrntWin.document.write("<!doctype html><html><head><title>Print<\/title><\/head><body onload=\"print();\">" + oDoc.innerHTML + "<\/body><\/html>");
            oPrntWin.document.close();
        }
    </script>
    <style type="text/css">
        .intLink { cursor: pointer; }
        img.intLink { border: 0; }
        #toolBar1 select { font-size:10px; }
        #textBox {
            width: 540px;
            height: 200px;
            border: 1px #000000 solid;
            padding: 12px;
            overflow: scroll;
        }
        #textBox #sourceText {
            padding: 0;
            margin: 0;
            min-width: 498px;
            min-height: 200px;
        }
        #editMode label { cursor: pointer; }
    </style>
</head>
<body onload="initDoc();">
<form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;">
    <input type="hidden" name="myDoc">
    <div id="toolBar1">
        <select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;">
            <option selected>- formatting -</option>
            <option value="h1">Title 1 &lt;h1&gt;</option>
            <option value="h2">Title 2 &lt;h2&gt;</option>
            <option value="h3">Title 3 &lt;h3&gt;</option>
            <option value="h4">Title 4 &lt;h4&gt;</option>
            <option value="h5">Title 5 &lt;h5&gt;</option>
            <option value="h6">Subtitle &lt;h6&gt;</option>
            <option value="p">Paragraph &lt;p&gt;</option>
            <option value="pre">Preformatted &lt;pre&gt;</option>
        </select>
        <select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;">
            <option class="heading" selected>- font -</option>
            <option>Arial</option>
            <option>Arial Black</option>
            <option>Courier New</option>
            <option>Times New Roman</option>
        </select>
        <select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;">
            <option class="heading" selected>- size -</option>
            <option value="1">Very small</option>
            <option value="2">A bit small</option>
            <option value="3">Normal</option>
            <option value="4">Medium-large</option>
            <option value="5">Big</option>
            <option value="6">Very big</option>
            <option value="7">Maximum</option>
        </select>
        <select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;">
            <option class="heading" selected>- color -</option>
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
            <option value="black">Black</option>
        </select>
        <select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;">
            <option class="heading" selected>- background -</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="black">Black</option>
        </select>
    </div>
    <div id="toolBar2">
        <img class="intLink" title="Clean" onclick="if(validateMode()&&confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src="" />
        <img class="intLink" title="Print" onclick="printDoc();" src="">
        <img class="intLink" title="Undo" onclick="formatDoc('undo');" src="" />
        <img class="intLink" title="Redo" onclick="formatDoc('redo');" src="" />
        <img class="intLink" title="Remove formatting" onclick="formatDoc('removeFormat')" src="">
        <img class="intLink" title="Bold" onclick="formatDoc('bold');" src="" />
        <img class="intLink" title="Italic" onclick="formatDoc('italic');" src="" />
        <img class="intLink" title="Underline" onclick="formatDoc('underline');" src="" />
        <img class="intLink" title="Left align" onclick="formatDoc('justifyleft');" src="" />
        <img class="intLink" title="Center align" onclick="formatDoc('justifycenter');" src="" />
        <img class="intLink" title="Right align" onclick="formatDoc('justifyright');" src="" />
        <img class="intLink" title="Numbered list" onclick="formatDoc('insertorderedlist');" src="" />
        <img class="intLink" title="Dotted list" onclick="formatDoc('insertunorderedlist');" src="" />
        <img class="intLink" title="Quote" onclick="formatDoc('formatblock','blockquote');" src="" />
        <img class="intLink" title="Delete indentation" onclick="formatDoc('outdent');" src="" />
        <img class="intLink" title="Add indentation" onclick="formatDoc('indent');" src="" />
        <img class="intLink" title="Hyperlink" onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}" src="" />
        <img class="intLink" title="Cut" onclick="formatDoc('cut');" src="" />
        <img class="intLink" title="Copy" onclick="formatDoc('copy');" src="" />
        <img class="intLink" title="Paste" onclick="formatDoc('paste');" src="" />
    </div>
    <div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div>
    <p id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p>
    <p><input type="submit" value="Send" /></p>
</form>
</body>
</html>
